<template>
  <custom-dialog
    :visible="visible"
    title="发送邮箱验证码"
    :draggable="true"
    width="500px"
  >
    <el-form :model="formData" label-position="right" label-width="auto">
      <el-form-item label="邮箱">
        {{ formData.email }}
      </el-form-item>
      <el-form-item label="验证码">
        <div class="captcha-container">
          <el-input
            v-model="formData.captcha"
            placeholder="请输入验证码"
            prefix-icon="EditPen"
          ></el-input>
          <div>验证码</div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="visible = false">
          发送验证码
        </el-button>
      </span>
    </template>
  </custom-dialog>
</template>

<script setup lang="ts">
import CustomDialog from "@/components/dialog/index.vue";
import { ref } from "vue";

const visible = ref(false);
const formData = ref({ email: "", captcha: "" });

const showDialog = (email: string) => {
  visible.value = true;
  formData.value.email = email;
};
defineExpose({ showDialog });
</script>

<style lang="scss" scoped>
.custom-dialog {
  margin: 30px auto 10px !important;
  .el-dialog__body {
    padding: 0;
  }

  .dialog-body {
    padding: 15px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    min-height: 80px;
    overflow: auto;
  }

  .dialog-footer {
    text-align: right;
    padding: 5px 20px;
  }

  .captcha-container {
    display: flex;
    align-items: center;
    .el-input {
      flex: 2;
      margin-right: 10px;
    }
    div {
      flex: 1;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #ddd;
    }
  }
}
</style>
